<template>
	<u-index-list customNavHeight="50" :index-list="indexList">
		<view class="" slot="header">
			<view class="search-c">
				<u-search placeholder="搜索城市" v-model="keyword"></u-search>
			</view>
			<view class="dang d-flex">
				<view class="">
					<view class="">当前城市</view>
					<view class="dq-c d-flex align-items">
						<image class="dw001" src="../static/dw001.png" mode="widthFix"></image>
						<view class="shiqu">{{city_name}}</view>
					</view>
				</view>
			</view>
		</view>
		<template v-for="(item, index) in itemArr">
			<!-- #ifdef APP-NVUE -->
			<u-index-anchor :text="indexList[index]"></u-index-anchor>
			<!-- #endif -->
			<u-index-item>
				<!-- #ifndef APP-NVUE -->
				<u-index-anchor :text="indexList[index]"></u-index-anchor>
				<!-- #endif -->
				<view class="list-cell" @click="chooseCtiy(cell)" v-for="(cell, index2) in item">
					{{cell.name}}
				</view>
			</u-index-item>
		</template>
	</u-index-list>

</template>

<script>
	import {
		get_group_by_letter
	} from '@/api/citys.js'
	export default {
		data() {
			return {
				keyword: '',
				indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "K", "R", "S",
					"T", "U", "V", "W", "X", "Y", "Z"
				],
				// itemArr: [
				// 	['列表A1', '列表A2', '列表A3'],
				// 	['列表B1', '列表B2', '列表B3'],
				// 	['列表C1', '列表C2', '列表C3'],
				// 	['列表D1', '列表D2', '列表D3'],
				// 	['列表E1', '列表E2', '列表E3'],
				// 	['列表F1', '列表F2', '列表F3'],
				// 	['列表G1', '列表G2', '列表G3'],
				// ],
				itemArr: [],
				city_name: '',
			}
		},
		onLoad() {
			this.get_citys()
		},
		onShow() {
			this.city_name = uni.getStorageSync('cityName') || '请选择'
		},
		methods: {
			chooseCtiy(cell) {
				console.log("选择的是", cell);
				uni.setStorageSync("latLng", [cell.lat, cell.lng])
				uni.setStorageSync("cityName", cell.name)
				uni.setStorageSync("cityId", cell.id)
				uni.$emit('changecity', {
					'lat': cell.lat,
					'lng': cell.lng,
					'name': cell.name,
					'id': cell.id
				})
				uni.navigateBack({
					delta: 1
				})
			},
			// 获取城市名称
			get_citys() {
				get_group_by_letter({}).then(res => {
					console.log("获取城市名称", res);
					if (res.code == 1) {
						this.indexList = res.data.letters
						this.itemArr = res.data.list
					}
				})
			},
		}
	}
</script>
<style lang="scss">
	.list {

		&__item {
			@include flex;
			padding: 6px 12px;
			align-items: center;

			&__avatar {
				height: 35px;
				width: 35px;
				border-radius: 3px;
			}

			&__user-name {
				font-size: 16px;
				margin-left: 10px;
				color: $u-main-color;
			}
		}

		&__footer {
			color: $u-tips-color;
			font-size: 14px;
			text-align: center;
			margin: 15px 0;
		}
	}
</style>
<style>
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}

	.dang {
		width: 690rpx;
		margin: auto;
		margin-bottom: 30rpx;
	}

	.shiqu {
		font-size: 30rpx;
		color: #4a4a4a;
	}

	.dw001 {
		width: 30rpx;
		display: block;
		margin-right: 7rpx;
	}

	.dq-c {
		border-radius: 10rpx;
		padding: 10rpx 20rpx;
		background: #f5f7f9;
		margin-top: 20rpx;
	}

	.search-c {
		width: 690rpx;
		margin: 30rpx auto;
	}
</style>